'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    Modal
} from 'react-native';

var {Loading, EasyLoading} = require('react-native-easy-loading');
import Color from '../../../../../core/constant/color';
import Toolbar from '../../../../../core/component/comp.toolbar';
import InitDB from '../../../../../core/database/init-db';
import ModalDropdown from '../../../../../core/component/comp.modal-dropdown';
import TableRowItem from '../../../../../core/component-biz/comp.table-row-item';
import {NavigationActions} from 'react-navigation'

let winWidth = Dimensions.get('window').width;//屏幕宽度
let winHeight = Dimensions.get('window').height;//屏幕高度

class SettingScene extends React.Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        title: "设置",
        headerTintColor: "white",
        tabBarVisible: false,
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null

        },
    });


    // 构造
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: '0',
        }
    }

    onPressExitSelect = (value) => {
        this.setState({modalVisible: '0'});
        if (value === '退出登陆') {
            Promise.resolve().then(EasyLoading.show('正在退出..', 3000))
            InitDB.logout();
            Promise.resolve().then(EasyLoading.dismis());
            const resetAction = NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName: 'Login'})
                ]
            })
            // this.props.navigation.dispatch(resetAction)
            this.props.screenProps.appNavigation.dispatch(resetAction);
        }
    }

    onPressExit = () => {
        this.setState({modalVisible: '1'});
    }


    genBtnExit(){
        return (
            <View style={{
                padding: 5,
                marginTop: 15,
                flexDirection: "row",
                justifyContent: "center",
                alignItems: "center",
                borderTopWidth: 1,
                borderColor: PageColor.borderColor,
                backgroundColor: '#ffffff'
            }}>
                <TouchableOpacity
                    style={{
                        padding: 8,
                        flexDirection: "row",
                        justifyContent: "center",
                    }}
                    onPress={this.onPressExit}>
                    <Text>退出登陆</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <View>
                <ScrollView style={styles.body}>
                    <Loading/>
                    <ModalDropdown
                        modalVisible={this.state.modalVisible}
                        data={['退出登陆']}
                        clickEvent={this.onPressExitSelect}/>

                    <TouchableWithoutFeedback
                        onPress={() => {
                            this.setState({modalVisible: '0'});
                        }}>
                        <View>
                            <TableRowItem title='账户与安全' onPress={() => {
                                this.props.navigation.navigate('AccountSafe');
                            }}/>
                            <TableRowItem title='身份认证' onPress={() => {
                                this.props.navigation.navigate('AccountSafe');
                            }}/>
                            <TableRowItem title='修改密码' showSplit={false} marginBottom={10} onPress={() => {
                                this.props.navigation.navigate('ChangePasswordScene');
                            }}/>
                            <TableRowItem title='新消息通知'/>
                            <TableRowItem title='隐私'/>
                            <TableRowItem title='通用'  showSplit={false} marginBottom={10} onPress={() => this.props.navigation.navigate('Tongyong')}/>
                            <TableRowItem title='关于'  showSplit={false} />

                            {this.genBtnExit()}
                        </View>
                    </TouchableWithoutFeedback>
                </ScrollView>
            </View>
        )
    }
}


class VideoSpzt extends React.Component {
    render() {
        let spzt = this.props.spzt;
        if (spzt && spzt != '1') {
            let spztDesc;
            if (spzt === '0') {
                spztDesc = '视频认证审批中';
            } else if (spzt === '2') {
                spztDesc = '视频认证未通过';
            }
            return (
                <View style={[this.props.styles, {backgroundColor: '#393130'}]}>
                    <Text>{spztDesc}</Text>
                </View>
            );
        } else {
            return null;
        }
    }
}


const PageColor = {
    textLabel: 'rgb(143,143,143)',
    borderColor: 'rgb(230,230,230)',
}


const styles = StyleSheet.create({
    body: {
        backgroundColor: Color.VIEW_BG_COLOR,
        height: winHeight,
    },
    topBg: {
        marginLeft: 2,
        marginRight: 2,
        height: winWidth / 5 * 3,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 2,
        borderColor: '#DDD',
        borderWidth: 2,
    },
    loginText: {
        fontSize: 18,
        color: '#FFF',
        position: 'absolute',
        top: 10,
    },
    headImg_out: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        borderWidth: 0,
        borderColor: '#dd2c2c',
        marginLeft: 2,
        marginRight: 2,
    },
    headImg: {
        height: 100,
        width: 100,
        borderRadius: 50,
    },
    yanzhengma_viewOut: {
        height: 40,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
    },
    yanzhengma_inputbox: {
        flex: 2,
        marginLeft: 0,
        marginRight: 10,
        marginTop: 0,
        marginBottom: 0,
        borderColor: '#DDD',
        borderRadius: 8,
        borderWidth: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputBox: {
        flexDirection: 'row',
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
        borderColor: '#DDD',
        borderRadius: 8,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 40
    },
    xiayibu_view: {
        flexDirection: 'row',
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
        borderColor: '#DDD',
        borderRadius: 15,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 40,
        backgroundColor: '#0404F2',
    },
    loginHref_view: {
        flexDirection: 'row',
        marginLeft: 80,
        marginRight: 80,
        marginTop: 5,
        justifyContent: 'center',
    },
    icon: {
        height: 15,
        width: 15,
        marginLeft: 10,
        marginRight: 10,
    },
    inputText: {
        flex: 1,
        marginRight: 10,
    },
    inputTextYanzhengma: {
        flex: 3,
        marginRight: 3,
    },

    addIdPicBox: {
        marginLeft: 40,
        marginRight: 40,
        marginTop: 10,
    },
    addIdPic: {
        height: 80,
        width: 80,
        marginLeft: 12,
        marginTop: 6,
    },
    loginBtn: {
        height: 40,
        borderRadius: 8,
        backgroundColor: '#00F',
        marginRight: 40,
        marginLeft: 40,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnText: {
        fontSize: 15,
        color: '#FFF',
    },
    inputErrorView: {
        marginLeft: 60,
        marginTop: 1,
        marginBottom: 1,
    },
    inputErrorTxt: {
        color: '#DF4849'
    },
    sex: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        marginTop: 0,
        height: "100%",
        alignItems: "center",
        backgroundColor: "#E4E4E4",
    },
});

module.exports = SettingScene;